<template>
  <div class="duty">
    <el-card class="duty-card">
      <template #header>
        <div class="card-header">
          <span class="title">今日值日生名单</span>
          <el-tag type="success">{{ new Date().toLocaleDateString() }}</el-tag>
        </div>
      </template>

      <div class="duty-content">
        <div v-if="groupedByTime.length">
          <div v-for="(timeGroup, index) in groupedByTime" :key="index" class="duty-section">
            <div class="task-time">{{ timeGroup.taskTime }}</div>
            <div v-for="(taskGroup, idx) in timeGroup.tasks" :key="idx" class="task-item">
              <div class="task-type">{{ taskGroup.taskName }}</div>
              <div class="people-list">
                <el-tag
                  v-for="studentId in taskGroup.studentIds"
                  :key="studentId"
                  size="small"
                  effect="plain"
                  class="person-tag"
                >
                  {{ studentId }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <p>今天没有值日生安排。</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'

interface dutyVO {
  name: string
  taskName: string
  taskTime: string
}
const currentDay = new Date().getDay()
const dutyList = ref<Array<dutyVO>>([])
const loadData = async () => {
  try {
    // 将 currentDay 包装成对象
    const res = await axios.post('/api/duty/getDay/list', {day:currentDay})
    if (res.data.code === 0) {
      dutyList.value = res.data.data
    }
  } catch (error) {
    console.error('加载数据时出错：', error)
  }
}

const groupedByTime = computed(() => {
  const timeMap = new Map()

  dutyList.value.forEach((task) => {
    if (!timeMap.has(task.taskTime)) {
      timeMap.set(task.taskTime, [])
    }
    const taskGroup = timeMap.get(task.taskTime)
    const existingTask = taskGroup.find(
      (t: { taskName: string; studentIds: string[] }) => t.taskName === task.taskName,
    )
    if (existingTask) {
      existingTask.studentIds.push(task.name)
    } else {
      taskGroup.push({ taskName: task.taskName, studentIds: [task.name] })
    }
  })

  return Array.from(timeMap.entries()).map(([taskTime, tasks]) => ({
    taskTime,
    tasks,
  }))
})
onMounted(() => {
  loadData()
})
</script>

<style scoped lang="scss">
.duty {
  .duty-card {
    border-radius: 8px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }
    }

    .duty-content {
      .duty-section {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        .task-item {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          padding: 8px;
          background: #f5f7fa;
          border-radius: 4px;

          .task-type {
            min-width: 80px;
            color: #606266;
          }

          .people-list {
            flex: 1;

            .person-tag {
              margin-right: 8px;

              &:last-child {
                margin-right: 0;
              }
            }
          }
        }

        .task-time {
          color: #409eff;
          font-weight: bold;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>
